<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用vue-完成选项卡的功能</title>
    <style>
        *{padding:0;margin: 0}
        .tablbox {margin: 100px auto;width: 600px;background:#ccc;overflow: hidden}
        .tablbox .tablbox-tit{overflow: hidden;display: flex;justify-content: space-around}
        .tablbox .tab-items{float: left;padding:0 10px;border:1px solid #ccc;margin:0 6px;cursor: pointer}
        .tablbox .tab-items.active{color: red}
        .tablbox .tab-items-content{padding:20px 10px 20px 16px;text-align: center}
    </style>
</head>
<body>

    <div id="app">
        <h1 style="text-align: center">{{title}}</h1>
        <div class="tablbox">
            <div class="tablbox-tit">
                <div class="tab-items" :title="item" :username="item" :class="[currentIndex==index?'active':'']" v-for="(item,index) in categorys" @click="changeTab(index)"><span v-text="item"></span></div>
            </div>
            <div class="tab-items-content">
                <div class="tab-items-content-item" v-if="currentIndex==0">新闻的内容</div>
                <div class="tab-items-content-item" v-if="currentIndex==1">娱乐的内容</div>
                <div class="tab-items-content-item" v-if="currentIndex==2">电影内容</div>
            </div>
        </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script>

        // 1: 事件绑定v-on
        // 2: 索引驱动的元素的控制
        var vue = new Vue({
            el:"#app",
            data:{
                currentIndex:0,
                title:"我是制作一个选项卡",
                categorys:["新闻","娱乐","电影"]
            },
            methods:{
                changeTab:function(index){
                    this.currentIndex = index;
                }
            }
        })
    </script>


</body>
</html>